<template>
    <a-modal
      title="查看修改鉴权设置"
      :visible="cardxtjqszVisible"
      @cancel="cancel"
      @ok="ok"
    >
      <div class="cardBlock">
        <div class="cardBlock_title">鉴权设置</div>
        <div class="cardBlock_fors" v-for="(items,index) in astrict_data" :key="index">
          <div class="cardBlock_items">
            <div class="cardBlock_items_lable">支持数量</div>
            <a-input disabled v-model="items.supportCount"/>
          </div>
          <div class="cardBlock_items">
            <div class="cardBlock_items_lable">鉴权数量</div>
            <a-input v-model="items.astrictCount"/>
          </div>
        </div>
        <div>
          <a-button type="primary" @click="addLine('add')">新增一行</a-button>
          <a-button type="primary" :disabled="astrict_data<=1" @click="addLine('del')">删除最后一行</a-button>
        </div>
      </div>
    
    
    </a-modal>
  </template>
  
  <script>
  import { writeBankAstrictListApi } from '@/api/system.js'
  export default {
    props:['categorys'],
    data() {
      return {
        cardxtjqszVisible:false,
        title:"添加",
        confirmLoading:false,
        loading:false,

        astrict_data:[{
          astrictCount:1,
          supportCount:1
        }],
        bank_id:"",
      }
    },
    created() {
    },
    methods: {
      openCardxtjqszDiogla(json){
        console.log(json)
        if(json.astrict){
          this.astrict_data=json.astrict
        }else{
          this.astrict_data=[{
          astrictCount:1,
          supportCount:1
        }]
        }
        this.bank_id=json.bank_id
        this.cardxtjqszVisible=true
      },
      handleOk(){
        this.cardxtjqszVisible=false
      },
      cancel(){
        this.handleOk()
      },
    addLine(type){
      if(type=='add'){
        this.astrict_data.push({
          astrictCount:1,
          supportCount:this.astrict_data.length+1
        })
      }
      if(type=='del'){
        if(this.astrict_data.length<=1){
          return
        }
        this.astrict_data.splice(this.astrict_data.length-1,1)
      }
    },

      ok(){
        writeBankAstrictListApi({
          astrict_data:this.astrict_data,
          bank_id:this.bank_id,
        brand_id: process.env.VUE_APP_BRAND_ID,
        }).then(res=>{
          this.$message.success("操作成功");
          this.handleOk()
          this.$emit("changes")
        })
      },
    }
  }
  </script>
  
  <style lang="less" scoped>
 .cardBlock{
  .cardBlock_title{
    padding: 10px 0;
    margin: 0 0 5px;
    color: rgba(0,0,0,.85);
  }
  .cardBlock_fors{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .cardBlock_items{
      width: 45%;
      display: flex;
      align-items: center;
      .cardBlock_items_titles{
        color: rgba(0,0,0,.65);
      }
      .cardBlock_items_lable{
        border: 1px solid #d9d9d9;
        padding: 4px 0;
        border-radius: 2px;
        width: 220px;
        text-align: center;
      }
    }
  }
}
  </style>
  